<template>
    <div class="shop-panel">
        <div class="shop-title">{{ shop.name }}</div>

        <!-- ✅来源切换 -->
        <div class="source-tabs">
            <button
                    v-for="btn in sourceTabs"
                    :key="btn.key"
                    :class="['source-btn',{active:currentSource===btn.key}]"
                    @click="changeSource(btn.key)"
            >
                {{ btn.label }}
            </button>
        </div>

        <div class="row-box">

            <!-- ✅左侧 2×4 KPI 布局 -->
            <div class="kpi-box">
                <div
                        v-for="(item,index) in currentData.kpis"
                        :key="index"
                        class="kpi-item"
                >
                    <div class="kpi-title">{{ item.label }}</div>
                    <div class="kpi-value">{{ item.value }}</div>
                </div>
            </div>

            <!-- ✅右侧 图表控制+折线图 -->
            <div class="chart-box-wrapper">

                <div class="chart-buttons">
                    <button
                            v-for="btn in chartBtns"
                            :key="btn.key"
                            :class="['chart-btn',{active:btn.visible}]"
                            @click="toggleLine(btn)"
                    >
                        {{ btn.label }}
                    </button>
                </div>

                <div class="chart-scroll">
                    <div ref="chartDom" class="chart-box"></div>
                </div>

            </div>

        </div>
    </div>
</template>

<script setup>
    import { ref, computed, watch, onMounted } from "vue";
    import * as echarts from "echarts";

    const props = defineProps({
        shop: Object
    });

    const currentSource = ref("all"); // ✅默认「整体成交」

    const chartDom = ref(null);
    let chart;

    // ✅来源切换按钮
    const sourceTabs = [
        { key: "all", label: "整体成交" },
        { key: "self", label: "自营成交" },
        { key: "coop", label: "合作成交" },
    ];

    const changeSource = (source) => {
        currentSource.value = source;
        updateChart();
    };

    const currentData = computed(() => props.shop.data[currentSource.value]);

    // ✅折线控制按钮（多选）
    const chartBtns = ref([
        { key: 'pay', label: '支付金额', visible: true },
        { key: 'refund', label: '退款金额', visible: false },
        { key: 'qc', label: '千川消耗', visible: false },
    ]);

    const toggleLine = (btn) => {
        btn.visible = !btn.visible;
        updateChart();
    };

    // ✅更新图表
    const updateChart = () => {
        if (!chart) return;

        const sData = currentData.value.chartData;

        const series = chartBtns.value
            .filter(btn => btn.visible) // ✅只绘制被激活的折线
            .map(btn => ({
                name: btn.label,
                type: "line",
                smooth: true,
                symbol: "circle",
                showSymbol: true,
                data: sData[btn.key],
                lineStyle: { width: 3 }
            }));

        chart.setOption({
            tooltip: { trigger: "axis" },
            xAxis: { type: "category", data: sData.date },
            yAxis: { type: "value" },
            legend: { show: false },
            series,
            grid: { left: 40, right: 20, top: 30, bottom: 20 },
            animation: true
        });
    };

    onMounted(()=>{
        chart = echarts.init(chartDom.value);
        updateChart();
    });

    watch(() => props.shop, updateChart, { deep:true });
    watch(currentSource, updateChart);
</script>

<style scoped>
    .shop-panel {
        background:#fff;
        padding:16px;
        border-radius:10px;
        margin-bottom:40px;
    }
    .shop-title {
        font-size:18px;
        font-weight:bold;
        margin-bottom:12px;
    }

    /* ✅顶部来源按钮 */
    .source-tabs {
        margin-bottom:12px;
    }
    .source-btn {
        padding:6px 14px;
        border:1px solid #dcdcdc;
        border-radius:6px;
        margin-right:10px;
        background:#fff;
    }
    .source-btn.active {
        background:#1976ff;
        border-color:#1976ff;
        color:#fff;
    }

    /* ✅左右并排布局 */
    .row-box {
        display:flex;
        gap:10px;
    }
    .kpi-box {
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        gap:10px;
        flex:1;
    }
    .kpi-item {
        background:#f7f9fd;
        padding:10px;
        border-radius:8px;
    }
    .kpi-title {
        font-size:12px;
        color:#666;
    }
    .kpi-value {
        font-size:16px;
        font-weight:bold;
        margin-top:4px;
    }

    /* ✅图表 */
    .chart-box-wrapper {
        flex:1;
        display:flex;
        flex-direction:column;
    }
    .chart-buttons {
        margin-bottom:10px;
    }
    .chart-btn {
        padding:4px 10px;
        font-size:12px;
        margin-right:8px;
        border:1px solid #ccc;
        border-radius:4px;
        background:#fff;
    }
    .chart-btn.active {
        background:#1976ff;
        color:#fff;
        border-color:#1976ff;
    }
    .chart-scroll {
        overflow-x:auto;
    }
    .chart-box {
        width:900px;
        height:260px;
    }

    /* ✅手机自适应 */
    @media (max-width:768px){
        .row-box{flex-direction:column;}
        .chart-box{width:700px;height:240px;}
    }
</style>
